@import "//at.alicdn.com/t/font_762056_b4s4ba2gogk.css";

:global {
	.layout {
		padding: 10px;
		border-radius: 4px;
		background-color: #fff;
	}
	div.left {
		flex: 8;
		height: 800px;
		// box-shadow: 0px 0px 4px #ccc;
		// margin-right: -1px;
	}
	.ant-tag-checkable.ant-tag-checkable-unchecked {
		border: 1px solid #1890ff;
		color: #1890ff;
	}
	.noticetitle {
	    font-size: 18px;
	    display: block;
	    padding: 20px 8px;
	    img{
    	    height:18px;
    	    border:none;
    	    margin-right:20px;
    	    margin-top:-4px;
    	}
	}
	.layer-controller {
		height: 50px;
		line-height: 50px;
		padding: 5px 20px;
		display: flex;
		justify-content: space-around;
	}
	.function-controller {
		height: 250px;
		padding: 0 20px;
		>div {
			margin: 0 auto 15px;
		}
		.data-handle-btn {
			text-align: right;
			button {
				margin-right: 20px;
			}
		}
		label {
			margin-right: 10px;
		}
		.ant-upload {
			margin-left: 20px;
		}
	}
	.map-view {
		width: 100%;
		height: calc(100% - 200px);
		margin: 20px auto;
		border-radius: 5px 5px 0 0;
		overflow: hidden;
		box-shadow: -1px 1px 6px #aaa;
		.legend-controller {
			position: absolute;
			padding: 5px;
		    border-radius: 4px;
		    background: rgba(255,255,255,.6);
	    	&.toward-vertical {
	    	    display: flex;
	            flex-direction: column;
	            .ant-tag {
	            	margin: 4px auto;
	            	width: 100%;
	        	    text-align: center;
	            }
	    	}
	    	&.vertical-top {
	    		top: 10px;
	    	}
	    	&.vertical-center {
	    		top: 50%;
	    		&.toward-vertical {
					margin-top: -100px;
	    		}
	    		&.toward-horizental {
					margin-top: -25px;
	    		}
	    	}
	    	&.vertical-bottom {
	    		bottom: 10px;
	    	}
	    	&.horizental-left {
	    		left: 10px;
	    	}
	    	&.horizental-center {
	    		left: 50%;
	    		&.toward-vertical {
					margin-left: -35px;
	    		}
	    		&.toward-horizental {
					margin-left: -100px;
	    		}
	    	}
	    	&.horizental-right {
	    		right: 10px;
	    	}
		}
		.map-icon {
			font-size: 24px;
			position: relative;
			animation: mapIcon 1.5s infinite ease-in-out;
			&:after {
				content: "";
			    display: block;
			    position: absolute;
			    bottom: -6px;
			    left: 50%;
			    height: 4px;
			    width: 80%;
			    box-shadow: 0px 0px 10px 0px #aaa3;
			    border-radius: 50%;
			    background-color: #aaa5;
			    transform: translate(-50%,0);
			    animation: mapIconAfter 1.5s infinite ease-in-out;
			}
		}
	}
}

.map-management {
	user-select: none;
	composes: globalClassName from global;
}
	